<template>
  <div>
    <a-modal
      :width="845"
      v-model:visible="props.visible"
      :maskClosable="false"
      :title="`上传成片至「` + props.Updateb_name + `」`"
      @cancel="cancel"
    >
      <div class="filmitem_box">
        <div>
          <span>文件夹</span>
          <a-tooltip placement="right">
            <template #title>
              <span>请选择保存文件夹</span>
            </template>
            <info-circle-outlined class="select_icon" />
          </a-tooltip>
        </div>
        <a-select
          style="width: 640px; margin: 10px 20px 20px 0"
          ref="select"
          v-model:value="merchant_folder_statck_id"
          placeholder="请选择文件夹"
        >
          <a-select-option
            v-for="(item, index) in props.optionsDetail"
            :key="index"
            :value="item.id"
          >
            {{ item.folder_name }}
          </a-select-option>
        </a-select>

        <a-button @click="openFile">新建文件夹</a-button>

        <div>
          <div class="title_top">
            <div class="title_top_left">新增上传</div>

            <div class="title_top_right">
              已添加 {{ updatevideo.length }} 个成片
              <span v-if="consumes !== ''"
                >, 预计将消耗 {{ consumes }}{{ unit }}{{ unit_name }} 
              </span>
            </div>
          </div>
          <div class="line"></div>
        </div>

        <div class="big-box">
          <a-upload-dragger
            :disabled="loading || noenzu"
            class="model_upload"
            v-model:file-list="fileList"
            @drop="handleDrop($event)"
            :max-count="10"
            :customRequest="customRequest"
            :before-upload="beforeUpload"
            :multiple="true"
            name="file"
            :directory="directory"
            accept=".mp4,.mov,.3gp"
            list-type="picture-card"
          >
            <div class="model_upload_text">
              <div class="model_upload_top">
                <plus-outlined style="font-size: 16px; margin-right: 10px" />
                <div>从本地文件夹选择</div>
              </div>

              <div class="model_upload_bottom">
                <div>支持的视频素材：mov/mp4/3gp（文件≤1G、时长≤60分钟）</div>
              </div>
            </div>
          </a-upload-dragger>

          <div
            class="updatevideo_All"
            v-for="(item, index) in updatevideo"
            :key="index"
          >
            <div class="updatevideo_item">
              <video
                :id="item.id"
                class="updatevideo_item_s"
                :src="item.url"
                @click="playVideo(item, index)"
              ></video>
              <play-circle-outlined
                v-show="item.isplayshow"
                class="play_video"
                @click="playVideo(item, index)"
              />

              <!-- 已上传 -->
              <div class="up_fin" v-if="item.up_finish == true">
                <a-tag color="success">已上传</a-tag>
              </div>
            </div>

            <!-- 进度条  上传中-->
            <div class="progress_item" v-if="item.up_ing == true">
              <a-progress
                :percent="isAlionline || isOss ? item.uploadProgress : 100"
                :showInfo="isAlionline || isOss"
                type="line"
                size="small"
                :stroke-color="{
                  '0%': '#108ee9',
                  '100%': '#87d068',
                }"
                status="active"
              />
            </div>

            <div class="updatevideo_bottom">
              <div class="updatevideo_bottom_left">
                {{ item.name }}
              </div>

              <div class="updatevideo_bottom_right">
                <delete-outlined
                  v-if="!loading"
                  class="updatevideo_icon_right"
                  @click="del_up(index)"
                />
              </div>
            </div>
          </div>
        </div>
      </div>

      <template #footer>
        <a-button @click="cancel">取消</a-button>
        <a-button
          key="submit"
          type="primary"
          :loading="loading"
          :disabled="updatevideo.length == 0"
          @click="Newsave"
          >确定</a-button
        >
      </template>

      <div class="baseModel">
        <a-modal
          :getContainer="'.baseModel'"
          v-model:visible="canel_visible"
          @ok="canel_handleOk"
          :zIndex="2000"
          :style="{ border: 'none' }"
        >
          <div class="cancel_content">
            <div style="font-weight: bold; font-size: 16px; margin-right: 10px">
              <info-circle-outlined style="color: #f7a726" />
              提示
            </div>
            <div style="margin-top: 10px">
              当前页面正在上传中，直接离开数据不会保存和更新
            </div>
          </div>
          <template #footer>
            <a-button style="border-radius: 5px" @click="gocanel"
              >确认返回</a-button
            >
            <a-button
              style="border-radius: 5px"
              type="primary"
              @click="canel_handleOk"
              >留在当前页</a-button
            >
          </template>
        </a-modal>
      </div>
    </a-modal>

    <!-- 新建文件夹 -->
    <NewFolder
      :isFlaking="true"
      :current_name="props.Updateb_name"
      :visible="addVisible"
      :is_merchant_library="1"
      @onCancel="addVisible = false"
      @onSubmit="closeAdd"
      :defaultData="{
        type: '视频',
        isDisable: true,
      }"
      :groupData="groupData"
    />
  </div>
</template>

<script setup>
import {
  watch,
  ref,
  createVNode,
  defineProps,
  defineEmits,
  computed,
  onMounted,
} from "vue";
import request from "@/common/utils/request";
import NewFolder from "@/views/shotstack/MaterialCenter/modules/NewFolder.vue";
import axios from "axios";
import utils from "@/common/utils/utils.js";
import defaultSetting from "@/common/utils/defaultSetting.js";
import { upload } from "@/common/utils/uploader/index";
import store from "@/store";

import {
  SearchOutlined,
  DeleteOutlined,
  EllipsisOutlined,
  ExclamationCircleOutlined,
  EyeOutlined,
  CloudUploadOutlined,
  InfoCircleOutlined,
  PlayCircleOutlined,
  PlusOutlined,
} from "@ant-design/icons-vue";
import { message, Modal, notification } from "ant-design-vue";

const emits = defineEmits(["GlobTitleState", "Request"]);

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  group_id: {
    type: String,
    default: "",
  },
  optionsDetail: {
    type: Object,
    default: {},
  },
  Updateb_name: {
    type: String,
    default: "",
  },
  PData: {
    type: Array,
    default: () => [],
  },
});

const work_ai_config = computed(() => {
  return store?.state?.shotstack?.work_ai_config || {};
});

const isAlionline = computed(() => {
  return work_ai_config.value?.shotstack_driver == "alionline";
});

const isOss = computed(() => {
  return work_ai_config.value?.upload_driver == "oss";
});

const merchant_folder_statck_id = ref(null);
const fileList = ref([]);
const allItemsFinished = ref(false);
// const isupdate = ref(true)
const isupdate = ref(false);

const updatevideo = ref([]);
const loading = ref(false);
const ALLshouldContinuePolling = ref(true);

const BASE_URL = ref("");
const isAll_upload = ref(false);

// 保存 上传按钮
const saveFn = () => {
  if (
    merchant_folder_statck_id.value !== "" &&
    merchant_folder_statck_id.value !== null
  ) {
    let uid = "";
    props.optionsDetail.forEach((item) => {
      if (item.id == merchant_folder_statck_id.value) {
        uid = item.group_id;
      }
    });

    BASE_URL.value = defaultSetting.requestDomain;
    if (process.env.NODE_ENV === "development") {
      BASE_URL.value = BASE_URL.value + "/api";
    }
    loading.value = true;
    ALLshouldContinuePolling.value = true;

    const uploadQueue = [];
    const MAX_CONCURRENT_UPLOADS = 3;

    // 检查剩余空间并上传文件
    async function checkSpaceAndUpload(file, index) {
      try {
        // 每次上传前检查剩余空间
        const res = await request.post("/work_ai", "/material/get/capacity");
        const remainingCapacity = parseInt(res.result.remainingCapacity, 10);
        if (remainingCapacity < file.size) {
          // 内存不够  充钱
          message.error(`存储空间不足，无法上传文件：${file.name}`);
          return;
        }
        const formData = new FormData();
        formData.append("file", file);
        formData.append("type", fileType.value);
        formData.append("scene", fileType.value);
        formData.append(
          "merchant_folder_statck_id",
          merchant_folder_statck_id.value
        );
        formData.append("org_id", utils.getOrgId());
        formData.append("user_token", utils.getToken());
        formData.append(
          "cur_env",
          utils.isMobile() ? "h5" : import.meta.env.ELECTRON ? "desktop" : "pc"
        );
        formData.append("team_id", utils.getCurrentTeam());
        formData.append("upload_from", "film");

        const response = await axios({
          method: "post",
          url: `${BASE_URL.value}/work_ai/material/upload`,
          data: formData,
          headers: {
            "Content-Type": "multipart/form-data",
            "Org-Token": utils.getToken(),
          },
        });

        if (response?.data?.data?.errorData.length > 0) {
          // 错误处理
          notification.warn({
            message: response.data.data.errorData[0],
            duration: 2,
          });
          loading.value = false;
          updatevideo.value = [];
          queryData.value.files = [];
          return;
        }

        // 上传中状态
        updatevideo.value[index].up_ing = true;
        let pollInterval; // 用于存储setInterval的返回值，以便稍后清除
        let shouldContinuePolling = true;

        // 在上传响应后开始轮询
        const startPolling = () => {
          pollInterval = setInterval(async () => {
            if (!ALLshouldContinuePolling.value) {
              clearInterval(pollInterval); // 如果应停止轮询，则清除定时器
              loading.value = false;
              return;
            }
            if (!shouldContinuePolling) {
              clearInterval(pollInterval); // 如果应停止轮询，则清除定时器
              loading.value = false;
              return;
            }

            try {
              const res = await request.get(
                "/work_ai",
                "/material/upload/status",
                { taskId: response.data.data.returnData[0].taskId }
              );
              if (res.status === 1) {
                // 继续轮询
              } else if (res.status === 2) {
                shouldContinuePolling = false; // 设置标志以停止轮询
                clearInterval(pollInterval); // 清除定时器

                updatevideo.value[index].up_ing = false;
                updatevideo.value[index].up_finish = true;
                const allVideosFinished = updatevideo.value.every(
                  (item) => item.up_finish === true
                );
                if (allVideosFinished) {
                  // 全部上传成功
                  loading.value = false;
                  cancel();
                }
              } else if (res.status === 3) {
                // 上传失败  停止轮训
                shouldContinuePolling = false; // 设置标志以停止轮询
                clearInterval(pollInterval); // 清除定时器
                loading.value = false;
                updatevideo.value[index].up_ing = false;
              }
            } catch (error) {
              clearInterval(pollInterval);
              loading.value = false;
              cancel();
            }
          }, 2000);
        };

        startPolling();
      } catch (error) {
        console.error("Error during upload:", error);
      }
    }

    // cos上传
    async function startUploads() {
      for (let i = 0; i < queryData.value.files.length; i++) {
        const file = queryData.value.files[i];
        // 将上传任务添加到队列中
        uploadQueue.push(checkSpaceAndUpload(file, i));

        // 如果队列中的任务数量超过了最大并发数，等待队列中的一个任务完成
        if (uploadQueue.length > MAX_CONCURRENT_UPLOADS) {
          await uploadQueue.shift();
        }
      }

      // 等待所有上传任务完成
      await Promise.all(uploadQueue);
    }

    // 控制并发数量的函数
    async function processQueue(queue, concurrency) {
      const runningTasks = new Set(); // 使用Set来存储正在运行的任务
      const results = [];

      const addTask = async () => {
        if (queue.length === 0) {
          return; // 如果队列为空，则不再添加新任务
        }

        const task = queue.shift();
        const promise = task()
          .then((res) => {
            results.push(res);
            runningTasks.delete(promise); // 任务完成后从集合中删除
            addTask(); // 尝试添加下一个任务
          })
          .catch((error) => {
            results.push(null); // 记录失败的结果
            runningTasks.delete(promise); // 任务完成后从集合中删除
            addTask(); // 尝试添加下一个任务
          });

        runningTasks.add(promise); // 添加到正在运行的任务集合中
      };

      // 初始填充运行任务
      for (let i = 0; i < concurrency; i++) {
        addTask();
      }

      // 等待所有任务完成
      while (runningTasks.size > 0 || queue.length > 0) {
        await Promise.race(runningTasks);
      }

      return results;
    }

    let oss_config;
    async function getOss_config() {
      const response = await request.post(
        "/work_ai",
        "/upload/oss/config/ststoken"
      );
      if (response.sts) {
        oss_config = response.sts;

        const nowTimestamp = Date.now();

        const expiresAtTimestamp = nowTimestamp + response.sts.duration * 1000;
        const stsToken_config = {
          stsToken: response.sts.stsToken,
          duration: response.sts.duration,
          FailDate: expiresAtTimestamp,
        };

        localStorage.setItem(
          "stsToken_config",
          JSON.stringify(stsToken_config)
        );
      } else {
        const Reres = await request.post(
          "/work_ai",
          "/upload/oss/config/ststoken",
          {
            isRefresh: "1",
          }
        );
        oss_config = Reres.sts;
      }
    }

    async function RegetOss_config() {
      const response = await request.post(
        "/work_ai",
        "/upload/oss/config/ststoken",
        {
          isRefresh: "1",
        }
      );
      if (response.sts) {
        oss_config = response.sts;
        const nowTimestamp = Date.now();
        const expiresAtTimestamp = nowTimestamp + response.sts.duration * 1000;
        const stsToken_config = {
          stsToken: response.sts.stsToken,
          duration: response.sts.duration,
          FailDate: expiresAtTimestamp,
        };

        localStorage.setItem(
          "stsToken_config",
          JSON.stringify(stsToken_config)
        );
      }
    }

    // oss上传
    async function startOssUploads() {
      await getOss_config();

      const newoss_config = JSON.parse(localStorage.getItem("stsToken_config"));

      // token 过期处理
      if (newoss_config == null) {
        await RegetOss_config();
      }
      const nowTime = Date.now();

      if (newoss_config.FailDate < nowTime) {
        await RegetOss_config();
      }

      let upDataList = queryData.value.files.map((item) => ({
        ...item,
        name: item.name,
        id: item.uid,
        state: 0,
        percent: 0,
        iscancel: false,
      }));

      // 将上传数据 同步至vuex
      store.dispatch("SetUpDateList", upDataList);

      const uploadQueue = queryData.value.files.map((file, i) => async () => {
        updatevideo.value[i].up_ing = true;

        // 可选的配置对象
        const config = {
          SetUploadPath: SetUploadPath.value,
          oss_config: oss_config,
        };

        const res = await upload(file, config);

        console.log(res, "上传的结果");

        if (res.state == false) {
          updatevideo.value.forEach((v1) => {
            if (v1.name == res.name) {
              v1.up_ing = false;
              v1.up_finish = true;
              v1.isfailed = true;
            }
          });
          if (updatevideo.value.every((item) => item.up_finish == true)) {
            isAll_upload.value = true;
          }
        }

        if (res.fileUrl) {
          let up_paramas = {
            merchant_folder_statck_id: merchant_folder_statck_id.value,
            material_type: "video",
            material_name: res.name,
            material_url: res.fileUrl,
            group_id: "",
            material_path: "",
            material_size: file.size,
            material_duration: "",
            width: "",
            height: "",
            oss_media_id: "",
            cover_url: "",
            oss_cover_media_id: "",
            upload_from: "film",
            material_exif: "",
          };

          return request
              .post("/work_ai", "/user/mobile/media", up_paramas)
              .then((res) => {
                updatevideo.value.forEach((v1) => {
                  if (v1.name == file.name) {
                    v1.up_ing = false;
                    v1.up_finish = true;
                  }
                });

                if (updatevideo.value.every((item) => item.up_finish == true)) {
                  isAll_upload.value = true;
                }
                return res;
              })
              .catch((error) => {
                return null;
              });
        }
      });

      const results = await processQueue(uploadQueue, 2); // 限制并发数量为2

      if (results.every((res) => res?.result) && isAll_upload.value) {
        isUploadComplete.value = true;
        updatevideo.value = [];
        isupdate.value = false;
        queryData.value.files = [];
        message.success("上传完成!");
        loading.value = false;
        cancel();
      }

      if (isAll_upload.value && results) {
        isUploadComplete.value = true;
        updatevideo.value = [];
        isupdate.value = false;
        queryData.value.files = [];
        // message.success("部分上传失败, 请稍后重试!");
        loading.value = false;
        emits("onSubmit");
      }
    }

    if (isAlionline.value || isOss.value) {
      // 阿里云上传
      startOssUploads();
    } else {
      startUploads().catch(console.error);
    }
  } else {
    message.error("请选择文件夹!");
  }
};

const Newsave = () => {
  if (updatevideo.value.length == 0) {
    message.warn("请先选择视频");
  } else {
    Modal.confirm({
      title: "提示",
      icon: createVNode(ExclamationCircleOutlined),
      content: `已添加${updatevideo.value.length}个成片, 预计将消耗${consumes.value}${unit.value}${unit_name.value}, 你确定继续吗?`,
      cancelText: "取消",
      okText: "确定",
      onOk: async () => {
        saveFn();
      },
      onCancel() {},
    });
  }
};

const queryData = ref({
  files: [],
});
const fileType = ref("");
const iscount = ref(0);
// 上传组件  手动上传
const customRequest = (file) => { 
  queryData.value.files.push(file.file);
  // 1. 拿到数据   视频
  fileType.value = file.file.type.split("/")[0];
  if (fileType.value == "video") {
    const url = URL.createObjectURL(file.file);
    updatevideo.value.push({
      url: url,
      name: file.file.name,
      id: file.file.uid,
      isplayshow: true,
      up_ing: false,
      up_finish: false,
    });
  }

  iscount.value += 1;
  if (iscount.value != all_file_list.value.length) return;
  getnewRule(all_file_list.value.length);
};

const consumes = ref("");
const unit = ref("");
const unit_name = ref("");
const totalDuration = ref(0);


const getnewRule = async (count) => {

  const res = await request.get(
    "/work_ai",
    "/user/shotstack/point/release/get",
    { number: count}
  );
  consumes.value = res.pointInfo.consumes;
  unit.value = res.pointInfo.unit;
  unit_name.value = res.pointInfo.name;
};

const SetUploadPath = ref("");
const fileMaxSize = ref("");
const free_send_text = ref("");
const fileMaxSizeErr = ref("");
const noenzu = ref(false);

const getaliinfo = async () => {
  await request
    .get("/work_ai", "/material/upload/info", {
      merchant_folder_statck_id: merchant_folder_statck_id.value,
      upload_from: "",
      number: "1",
    })
    .then((res) => {
      if (res.code == 1001) {
        noenzu.value = true;
      }
      if (res.result) {
        if (res.result.pointInfo.current >= res.result.pointInfo.consumes) {
          SetUploadPath.value = res.result.upload_path;
          fileMaxSize.value = res.result.fileMaxSize;
          free_send_text.value = res.result.free_send_text;
          fileMaxSizeErr.value = res.result.fileMaxSizeErr;
        } else {
          message.error(`${res.result.pointInfo.name}不足, 请充值`);
          noenzu.value = true;
        }
      }
    });
};

const all_file_list = ref([]);

// 上传前的准备
const beforeUpload = async (file, fileList) => {
  all_file_list.value.push(fileList)
  return new Promise((resolve) => {
    const isLt1G = file.size / 1024 / 1024 / 1024 < 1;
    if (free_send_text.value && free_send_text.value == "赠送套餐") {
      if (file.size > fileMaxSize.value) {
        message.error(fileMaxSizeErr.value);
        resolve(false);
        return;
      }
    }
    if (!isLt1G) {
      message.error("视频文件不可大于 1GB!");
      resolve(false);
      return;
    }
    const video = document.createElement("video");
    const blobURL = URL.createObjectURL(file);
    video.src = blobURL;
    video.onloadedmetadata = () => {
      const duration = video.duration;
      const width = video.videoWidth;
      const height = video.videoHeight;

      if (duration > 3600) {
        message.error("视频文件不能大于 60 分钟时长!");
        resolve(false);
        return;
      }


      if (width > 4096 || height > 4096) {
        message.error("视频最大不能超过 4096px!");
        resolve(false);
        return;
      }

      resolve(true);
    };
  });
};
const canel_visible = ref(false);
const canel_handleOk = () => {
  canel_visible.value = false;
};

const gocanel = () => {
  canel_visible.value = false;
  isupdate.value = false;
  allItemsFinished.value == false;
  ALLshouldContinuePolling.value = false;
  updatevideo.value = [];
  queryData.value.files = [];
  is_over.value = false;
  emits("cancel");
};

const is_over = ref(false);
// 取消
const cancel = () => {
  if (loading.value) {
    if (isAlionline.value || isOss.value) {
      canel_visible.value = true;
    }
  } else {
    isupdate.value = false;
    allItemsFinished.value == false;
    ALLshouldContinuePolling.value = false;
    updatevideo.value = [];
    all_file_list.value = [];
    queryData.value.files = [];
    is_over.value = true;
    iscount.value = 0
    consumes.value = ""
    emits("cancel");
  }
};

// 删除预览
const del_up = (index) => {
  updatevideo.value.forEach((item) => {
    const videoElement = document.getElementById(item.id);
    if (videoElement) {
      videoElement.pause();
      item.isplayshow = true;
    }
  });
  if (index >= 0 && index < updatevideo.value.length) {
    updatevideo.value.splice(index, 1);
    queryData.value.files.splice(index, 1);
    iscount.value -= 1

    all_file_list.value.splice(index, 1);
  }
  
  getnewRule(updatevideo.value.length);
};

const playVideo = (item, index) => {
  const videoElement = document.getElementById(item.id);
  if (videoElement) {
    if (item.isplayshow == true) {
      videoElement.play();
      item.isplayshow = false;
    } else {
      videoElement.pause();
      item.isplayshow = true;
    }
  }
};



watch(
  () => props.optionsDetail,
  (val) => {
    if (val.length > 0) {
      merchant_folder_statck_id.value = val[0].id;
      if (isAlionline) {
        getaliinfo();
      }
    }
  },
  {
    immediate: true,
    deep: true,
  }
);

const addVisible = ref(false);
const groupData = ref({
  default_group_id: "",
  merchant_library_id: "",
  group_name: "",
});

const itemList = ref([]);
// 获取项目列表
const getItemList = async () => {
  const res = await request.get(
    "/work_ai",
    "/user/shotstack/library/withGroup/list"
  );
  if (res && res.result.length) {
    itemList.value = res.result;
  } else {
    itemList.value = [];
  }
};

getItemList();
const openFile = () => {
  itemList.value.forEach((item) => {
    if (item.id == props.group_id) {
      groupData.value.default_group_id = item.default_group_id;
      groupData.value.merchant_library_id = item.id;
      groupData.value.group_name = item.name;
    }
  });

  addVisible.value = true;
};

const closeAdd = async (data) => {
  emits("Request", data);
  addVisible.value = false;
};

const isTen = ref(true);
const isUploadComplete = ref(false);
// 视频数组
watch(
  () => updatevideo.value,
  (val) => {
    if (val.length == 10) {
      isTen.value = false;
    }
    if (val.every((item) => !item.up_ing)) {
      // 全部执行完成
      loading.value = false;
      if (val.some((item) => item.isfailed)) {
        // 重新上传标识
        failed_btn.value = true;
      }
    }

    if (val.every((item) => item.up_finish == true) && !isUploadComplete) {
      isUploadComplete.value == true;
    }
  },
  {
    deep: true,
  }
);

watch(
  () => store.state.user.uploadProgress,
  (val) => {
    updatevideo.value.forEach((v1) => {
      val.forEach((v2) => {
        if (v1.name == v2.filename) {
          v1.uploadProgress = v2.uploadProgress;
        }
      });
    });
  },
  {
    immediate: true,
    deep: true,
  }
);


</script>

<style lang="less" scoped>
:deep(.model_upload) {
  height: 165px !important;
  width: 240px !important;
  border-radius: 10px !important;
  margin-right: 20px;
}

:deep(.ss-upload-list-picture-card) {
  display: none !important;
}

.model_upload_text {
  color: #999;
  font-size: 14px;

  .model_upload_top {
    display: flex;
    justify-content: center;
    margin-top: 27px;
    align-items: center;
  }

  .model_upload_bottom {
    margin: 10px auto;
    width: 209px;
  }
}

.isupdating {
  height: 165px;
  width: 240px;
  border-radius: 10px;
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  color: #999;
  font-size: 16px;
  text-align: center;
  padding-top: 60px;
  margin-right: 20px;
}

.isupdating:hover {
  border: 1px dashed #3261fb;
}

.updatevideo_All {
  margin-right: 20px;
  margin-bottom: 10px;
  width: 240px;
}

.updatevideo_item {
  height: 165px;
  width: 240px;
  background-color: #000;
  border-radius: 10px;

  display: flex;
  justify-content: center;
  position: relative;

  .up_fin {
    position: absolute;
    bottom: 10px;
    right: -8px;
  }

  .updatevideo_item_s {
    width: 100%;
  }
}

.updatevideo_bottom {
  display: flex;
  justify-content: space-between;

  .updatevideo_bottom_left {
    width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

.updatevideo_icon_right {
  font-size: 16px;
  margin-right: 20px;
}

.play_video {
  color: #fff;
  font-size: 33px;
  position: absolute;
  top: 43%;
}

.big-box {
  height: 390px;
  overflow-y: auto;
  display: flex;
  flex-wrap: wrap;
}

.select_icon {
  font-size: 16px;
  margin-left: 10px;
}

.line {
  height: 1px;
  width: 760px;
  background-color: #e5e5e5;
  margin: 10px 0 20px 0;
}

.title_top {
  display: flex;
  justify-content: space-between;

  .title_top_right {
    margin-right: 35px;
  }
}

.baseModel {
  :deep(.ss-modal-footer) {
    border-top: none !important;
  }

  :deep(.ss-modal-body) {
    padding-top: 30px !important;
  }

  :deep(.ss-modal) {
    width: 410px !important;
  }
}
</style>
